<!--
* @description 按钮模块
* @fileName index.vue
* @author zero_fsc
* @date 2020/06/16 15:27:31
!-->
<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- uiType为default 无图标时 -->
      <h1 style="font-weight: 600">uiType为default</h1>
      <br>
      <YlButton />
      <YlButton btnType="warning" />
      <YlButton btnType="danger" />
      <YlButton btnType="success" />
      <YlButton btnType="info" />
      <br>
      <br>
      <!-- uiType为default 有图标时 -->
      <h1 style="font-weight: 600">uiType为default 有图标</h1>
      <br>
      <YlButton icon="el-icon-s-help" />
      <YlButton btnType="warning" icon="el-icon-s-help" />
      <YlButton btnType="danger" icon="el-icon-s-help" />
      <YlButton btnType="success" icon="el-icon-s-help" />
      <YlButton btnType="info" icon="el-icon-s-help" />
      <br>
      <br>
      <!-- uiType为plain 无图标时 -->
      <h1 style="font-weight: 600">uiType为plain</h1>
      <br>
      <YlButton uiType="plain" />
      <YlButton uiType="plain" btnType="warning" />
      <YlButton uiType="plain" btnType="danger" />
      <YlButton uiType="plain" btnType="success" />
      <YlButton uiType="plain" btnType="info" />
      <br>
      <br>
      <!-- uiType为plain 有图标时 -->
      <h1 style="font-weight: 600">uiType为plain 有图标</h1>
      <br>
      <YlButton uiType="plain" icon="el-icon-s-help" />
      <YlButton uiType="plain" btnType="warning" icon="el-icon-s-help" />
      <YlButton uiType="plain" btnType="danger" icon="el-icon-s-help" />
      <YlButton uiType="plain" btnType="success" icon="el-icon-s-help" />
      <YlButton uiType="plain" btnType="info" icon="el-icon-s-help" />
      <br>
      <br>
      <!-- uiType为common 无图标时 -->
      <h1 style="font-weight: 600">uiType为common</h1>
      <br>
      <YlButton uiType="common" />
      <YlButton uiType="common" btnType="warning" />
      <YlButton uiType="common" btnType="danger" />
      <YlButton uiType="common" btnType="success" />
      <YlButton uiType="common" btnType="info" />
      <br>
      <br>
      <!-- uiType为common 有图标时 -->
      <h1 style="font-weight: 600">uiType为common 有图标</h1>
      <br>
      <YlButton uiType="common" icon="el-icon-s-help" />
      <YlButton uiType="common" btnType="warning" icon="el-icon-s-help" />
      <YlButton uiType="common" btnType="danger" icon="el-icon-s-help" />
      <YlButton uiType="common" btnType="success" icon="el-icon-s-help" />
      <YlButton uiType="common" btnType="info" icon="el-icon-s-help" />
      <br>
      <br>
      <!-- uiType为main 无图标时 -->
      <h1 style="font-weight: 600">uiType为main</h1>
      <br>
      <YlButton uiType="main" />
      <YlButton uiType="main" btnType="warning" />
      <YlButton uiType="main" btnType="danger" />
      <YlButton uiType="main" btnType="success" />
      <YlButton uiType="main" btnType="info" />
      <br>
      <br>
      <!-- uiType为main 有图标时 -->
      <h1 style="font-weight: 600">uiType为main 有图标</h1>
      <br>
      <YlButton uiType="main" icon="el-icon-s-help" />
      <YlButton uiType="main" btnType="warning" icon="el-icon-s-help" />
      <YlButton uiType="main" btnType="danger" icon="el-icon-s-help" />
      <YlButton uiType="main" btnType="success" icon="el-icon-s-help" />
      <YlButton uiType="main" btnType="info" icon="el-icon-s-help" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
